<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>学生</title>
  <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
  <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
  <link rel="stylesheet" href="./css/common.css" />
  <link rel="stylesheet" href="./css/student.css" />
</head>

<body class="application application-offset">
  <div class="container-fluid container-application">
    <div class="sidenav show" id="sidenav-main">
      <!-- Sidenav header -->
      <div class="sidenav-header d-flex align-items-center">
        <a class="navbar-brand" href="./index.html">
          <span class="logo">·ITCAST·</span>
        </a>
      </div>
      <!-- User mini profile -->
      <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
        <!-- Avatar -->
        <div>
          <a href="#" class="avatar rounded-circle avatar-xl">
            <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg"
              class="" />
          </a>
          <div class="mt-5">
            <h5 class="mb-0 text-white">黑马前端</h5>
            <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
            <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
              <span class="btn-inner--text">学前端来黑马</span>
            </a>
          </div>
        </div>
      </div>
      <!-- Application nav -->
      <div class="nav-application clearfix">
        <a href="./index.html" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">首页</span>
        </a>
        <a href="./student.html" class="btn btn-square text-sm active">
          <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">学生</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">排版</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">资料</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">就业</span>
        </a>
        <a href="javascript:;" class="btn btn-square text-sm">
          <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
          <span class="btn-inner--icon d-block pt-2">设置</span>
        </a>
      </div>
      <!-- Misc area -->
      <div class="card bg-gradient-warning">
        <div class="card-body">
          <h5 class="text-white">哈喽, 朋友!</h5>
          <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
          <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
        </div>
      </div>
    </div>
    <div class="main-content position-relative">
      <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
        <div class="container-fluid">
          <!-- Navbar nav -->
          <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
            <ul class="navbar-nav align-items-lg-center">
              <!-- Home  -->
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
              </li>
            </ul>
            <!-- Right menu -->
            <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
              <li class="nav-item dropdown dropdown-animate">
                <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <div class="media media-pill align-items-center">
                    <span class="avatar rounded-circle">
                      <img alt="Image placeholder"
                        src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                    </span>
                    <div class="ml-2 d-none d-lg-block">
                      <!-- ---------------- 用户名 ---------------- -->
                      <span class="mb-0 text-sm font-weight-bold">Admin</span>
                    </div>
                  </div>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <div class="page-content">
        <div class="page-title mb-3">
          <div class="row justify-content-between align-items-center">
            <div class="col-md-6 mb-3 mb-md-0">
              <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
              <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
            </div>
            <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
              <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                <span class="btn-inner--icon"><i class="bi bi-plus bi-2x"></i></span>
              </a>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="card card-fluid">
              <div class="table-responsive" style="min-height: 1000px">
                <table class="table align-items-center">
                  <thead>
                    <tr>
                      <th>姓名</th>
                      <th>年龄</th>
                      <th>性别</th>
                      <th>组号</th>
                      <th>期望薪资</th>
                      <th>就业薪资</th>
                      <th>籍贯</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody class="list">
                    <!-- <tr>
                      <td>张杰</td>
                      <td>20</td>
                      <td>男</td>
                      <td>第2组</td>
                      <td>10000</td>
                      <td>13000</td>
                      <td>北京北京市东城区</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
                      </td>
                    </tr> -->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
        <!-- footer -->
        <div class="footer pt-5 pb-4 footer-light" id="footer-main">
          <div class="row text-center text-sm-left align-items-sm-center">
            <div class="col-sm-6">
              <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>.
                All rights reserved.</p>
            </div>
            <div class="col-sm-6 mb-md-0">
              <ul class="nav justify-content-center justify-content-md-end">
                <li class="nav-item">
                  <a class="nav-link" href="#">Support</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Terms</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pr-0" href="#">Privacy</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- add Modal -->
  <div class="modal fade" id="modal" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加学员</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form" class="g-3 row" autocomplete="off" novalidate>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">姓名：</label>
                <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">性别：</label>
                <div class="input">
                  <div class="form-check d-inline-block">
                    <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                    <label for="cb01" class="form-check-label">男</label>
                  </div>
                  <div class="form-check d-inline-block">
                    <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                    <label for="cb02" class="form-check-label">女</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">年龄：</label>
                <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">组号：</label>
                <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">期望薪资：</label>
                <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
              </div>
            </div>
            <div class="col-sm-6">
              <div class="form-group">
                <label class="input-group-label">就业薪资：</label>
                <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
              </div>
            </div>
            <div class="col-sm-12">
              <div class="form-group">
                <label class="input-group-label">籍贯：</label>
                <div class="input pl-0">
                  <select class="form-select custom-select" name="province">
                    <option value="">--省份--</option>
                  </select>
                  <select class="form-select custom-select" name="city">
                    <option value="">--城市--</option>
                  </select>
                  <select class="form-select custom-select" name="area">
                    <option value="">--地区--</option>
                  </select>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="close">取消</button>
          <button type="button" class="btn btn-blue" id="submit">确认</button>
        </div>
      </div>
    </div>
  </div>

  <!-- toast -->
  <div class="toast position-fixed top-5 start-50 translate-middle" style="z-index:999" role="alert"
    aria-live="assertive" aria-atomic="true">
    <!-- 可以自己定义内部结构 -->
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>


  <script src="./bootstrap/bootstrap.min.js"></script>
  <script src="./lib/axios.js"></script>
  <script src="./lib/form-serialize.js"></script>
  <script src="./js/common.js"></script>
  <script>
    async function render() {
      const res = await axios({
        url: "/students"
      })
      console.log(res);
      document.querySelector("tbody").innerHTML = res.data.data.map(v => {
        return `
          <tr>
                      <td>${v.name}</td>
                      <td>${v.age}</td>
                      <td>${v.gender}</td>
                      <td>第${v.group}组</td>
                      <td>${v.hope_salary}</td>
                      <td>${v.salary}</td>
                      <td>${v.province}${v.city}${v.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${v.id}></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${v.id}></i></a>
                      </td>
                    </tr> 
        `
      }).join("")
    }
    render()
    document.querySelector("tbody").addEventListener("click", async function (e) {
      if (e.target.classList.contains("bi-trash")) {
        const res = await axios({
          url: `/students/${e.target.dataset.id}`,
          method: "delete"
        })
        render()
      }
    })

    const myModal = new bootstrap.Modal(document.getElementById('modal'))



    document.querySelector("#openModal").addEventListener("click", function (e) {
      document.querySelector("#modal .modal-title").innerHTML = "添加学员"
      myModal.show()

    })
    document.querySelector("#submit").addEventListener("click", function (e) {
      myModal.hide()
    })
    document.querySelector("select[name=province]").addEventListener("click", async function (e) {
      const res = await axios({
        url: "/api/provincesList",
        method: "get"
      })
      console.log(res);

    })
    document.querySelector("select[name=city]").addEventListener("click", async function (e) {

    })
    document.querySelector("select[name=area]").addEventListener("click", async function (e) {

    })
    // 点击取消关闭弹窗
    document.querySelector("#close").addEventListener("click", function (e) {
      myModal.hide()
    })

  </script>
</body>

</html>

<!-- <script>
      // 功能a: 学生列表
        /* 
        a1. 发起ajax请求，获取学生列表数据
        a2. 接收数据，并渲染
        */

        async function render() {
          let res = await axios({
            url: '/students',
            method: 'get'
          })

          // console.log(res);
          let nArr = res.data.data.map(item => {
            let { name, age, gender, group, hope_salary, salary, province, city, area, id } = item;
            return `<tr>
                  <td>${name}</td>
                  <td>${age}</td>
                  <td>${gender === 0 ? '男' : '女'}</td>
                  <td>第${group}组</td>
                  <td>${hope_salary}</td>
                  <td>${salary}</td>
                  <td>${province} ${city} ${area}</td>
                  <td>
                    <a href="javascript:;" class="text-success mr-3"><i data-id="${id}" class="bi bi-pen"></i></a>
                    <a href="javascript:;" class="text-danger"><i data-id="${id}" class="bi bi-trash"></i></a>
                  </td>
                </tr>`
          })

          document.querySelector('.list').innerHTML = nArr.join('')
        }

        render()

        // 功能b:实现删除
        /* 
        b1. 利用事件委托为a链接注册事件
        b2. 在事件里进行目标对象识别
          实现删除
          重新渲染页面
    
        */
        document.querySelector('.list').addEventListener('click', async function (e) {
          // console.log(e.target)
          // console.log(e.target.tagName)  获取的是标签名，获取出来的是大写的
          if (e.target.tagName === 'I') {
            if (e.target.classList.contains('bi-trash')) {
              // console.log('删除');
              // 获取当前学生的id
              let id = e.target.dataset.id
              // console.log(id);
              try {
                let ret = await axios({
                  url: `/students/${id}`,
                  method: 'delete'
                })
                render()
              } catch (error) {
                tip('删除失败')
                // console.log(error);
              }

            } else if (e.target.classList.contains('bi-pen')) {
              document.querySelector('#modal .modal-title').innerHTML = '编辑学员'

              // console.log('编辑');
              // 获取当前学生的id
              let id = e.target.dataset.id
              // 显示编辑弹窗
              addModal.show();
              // 获取学生数据，进行判断
              let res = await axios({
                url: `/students/${id}`
              })
              // console.log(res);
              // 由于下一步提交时，接口需要id数据，所以将id保存 到一个对象
              addModal.id = id;

              // 渲染学生信息
              document.querySelector('input[name=name]').value = res.data.data.name
              document.querySelector('input[name=age]').value = res.data.data.age
              document.querySelector('input[name=hope_salary]').value = res.data.data.hope_salary
              document.querySelector('input[name=salary]').value = res.data.data.salary
              document.querySelector('input[name=group]').value = res.data.data.group
              // 性别不是文本框，不能通过value来设置选中状态
              // 性别是单选框，需通过设置checked让男或女默认选择中
              let oGenders = document.querySelectorAll('input[name=gender]')
              res.data.data.gender === 0 ? oGenders[0].checked = true : oGenders[1].checked = true

              // 由于默认的下拉列表项与学生的真实的省市区不一致，
              // 所以我要这里调用
              await renderProv(res.data.data.province)
              await renderCity(res.data.data.city)
              await renderArea(res.data.data.area)
            }
          }
        })

        // 功能c：显示新增弹窗
        /* 
        为新增按钮 注册 click事件
        在事件里，显示新增弹窗
        */
        let addModal = new bootstrap.Modal(document.querySelector('#modal'))
        document.querySelector('.bi-plus').addEventListener('click', function () {
          // 设置标题
          document.querySelector('#modal .modal-title').innerHTML = '添加学员'
          addModal.show()
          // 
        })

        // 封装函数显示省市区
        let oProv = document.querySelector('select[name=province]')
        let oCity = document.querySelector('select[name=city]')
        let oArea = document.querySelector('select[name=area]')

        // 封装渲染省份下拉列表函数
        async function renderProv(province = '') {
          let res = await axios({
            url: '/api/province',
            method: 'get'
          })
          // console.log(res);
          let nArr = res.data.data.map(item => `<option value="${item}">${item}</option>`)
          oProv.innerHTML = nArr.join('')

          // oProv是select标签，为这个标签设置value即可以让某个下拉列表项处于选中状态
          if (province) {
            oProv.value = province
          }
        }

        // 封装渲染城市下拉列表函数
        async function renderCity(city = '') {
          let res = await axios({
            url: '/api/city',
            method: 'get',
            params: {
              pname: oProv.value
            }
          })
          // console.log(res);
          let nArr = res.data.data.map(item => `<option value="${item}">${item}</option>`)
          oCity.innerHTML = nArr.join('')
          if (city) {
            oCity.value = city
          }
        }

        // 封装渲染街区下拉列表函数
        async function renderArea(area = '') {
          let res = await axios({
            url: '/api/area',
            method: 'get',
            params: {
              pname: oProv.value,
              cname: oCity.value
            }
          })
          let nArr = res.data.data.map(item => `<option value="${item}">${item}</option>`)
          oArea.innerHTML = nArr.join('')
          if (area) {
            oArea.value = area
          }
        }

        async function renderAll() {
          await renderProv()
          await renderCity();
          await renderArea();
        }

        renderAll()

        // 实现省市区联动1：
        oProv.addEventListener('change', async function () {
          await renderCity();
          await renderArea();
        })
        // 实现省市区联动2：
        oCity.addEventListener('change', function () {
          renderArea();
        })

        // 为 弹窗 中的 确认 按钮注册事件
        document.querySelector('#submit').addEventListener('click', async function () {

          let data = serialize(document.querySelector('#modal form'), { hash: true })
          // console.log(data);
          // 按接口要求转换数据格式
          data.age = +data.age
          data.gender = +data.gender
          data.hope_salary = +data.hope_salary
          data.salary = +data.salary
          data.group = +data.group

          // 识别是添加还是编辑
          // console.log(addModal.id);
          if (addModal.id) {    // 如果addModal.id读出了数据，就是进行更新操作
            // 发想ajax请求
            let ret = await axios({
              url: `/students/${addModal.id}`,
              method: 'put',
              data: data
            })


          } else {              // 如果addModal.id读出了数据，就是进行新增操作

            let res = await axios({
              url: '/students',
              method: 'post',
              data: data
            })


          }

          // 渲染页面
          render()
          // 重置表单
          document.querySelector('#modal form').reset()
          // 重置关闭弹窗
          addModal.hide();
          // 清除addModal.id
          addModal.id = null

          await renderProv('广东省')
          await renderCity('广州市')
          await renderArea('天河区')

        })


        // 为取消按钮 绑定事件
        document.querySelector('#close').addEventListener('click', async function () {
          document.querySelector('#modal form').reset();
          await renderProv('广东省')
          await renderCity('广州市')
          await renderArea('天河区')
        })
</script> -->